<template>
  <div>
    <h3>预订界面</h3>
    <div class="search">
      <input type="text" placeholder="请输入搜索内容" class="search-input" v-model="searchText">
      <el-button type="primary" @click="handleSearch" class="search-button">搜索</el-button>
      <el-button type="primary" @click="handleSearch" class="search-button">重置</el-button>
    </div>
    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%; margin-top:10px;"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
    prop="name"
    label="姓名"
    width="120">
  </el-table-column>
    <el-table-column
      label="联系电话"
      width="120">
      <template slot-scope="scope">{{ scope.row.tel }}</template>
    </el-table-column>
    <el-table-column
      label="入住日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      label="退房日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.endDate }}</template>
    </el-table-column>

    <el-table-column
      prop="address"
      label="酒店名称"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="people"
      label="支付状态"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="updateCateBtnFn(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="delCateFn(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
export default {
  name: 'HotelSystemAdminIndex',

  data () {
    return {
      searchText: '',
      orderData: [],
      tableData: [{
        date: '2023-05-03',
        endDate: '2023-05-12',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        tel: 13861368239,
        people: 2
      }, {
        date: '2023-05-02',
        name: '王小虎',
        endDate: '2023-05-12',
        address: '上海市普陀区金沙江路 1518 弄',
        tel: 13861368239,
        people: 3
      }, {
        date: '2023-05-04',
        name: '王小虎',
        endDate: '2023-05-12',
        address: '上海市普陀区金沙江路 1518 弄',
        tel: 13861368239,
        people: 1
      }, {
        date: '2023-05-01',
        name: '王小虎',
        endDate: '2023-05-12',
        address: '上海市普陀区金沙江路 1518 弄',
        tel: 13861368239,
        people: 1
      }, {
        date: '2023-05-08',
        name: '王小虎',
        endDate: '2023-05-12',
        address: '上海市普陀区金沙江路 1518 弄',
        tel: 13861368239,
        people: 1
      }, {
        date: '2023-05-06',
        name: '王小虎',
        endDate: '2023-05-12',
        address: '上海市普陀区金沙江路 1518 弄',
        tel: 13861368239,
        people: 1
      }, {
        date: '2023-05-07',
        name: '王小虎',
        endDate: '2023-05-12',
        address: '上海市普陀区金沙江路 1518 弄',
        tel: 13861368239,
        people: 1
      }],
      multipleSelection: []
    }
  },

  mounted () {

  },

  methods: {
    handleSearch () {
      // 获取搜索框中输入的内容
      const keyword = this.searchText.trim()
      console.log(keyword)
      this.searchText = ''
      // 进行搜索操作
      // 可以通过ajax请求搜索接口传递给后端
      // 也可以在前端进行数据过滤
    },
    // 表格全选反选
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="less" scoped>
.search-input {
  width: 300px;
  height: 30px;
  text-align: center;

}
.search-button {
  height: 40px;
  margin-left: 10px;
}
</style>
